import React from 'react'
import { NavBar, Space, Toast, Card } from 'antd-mobile'
import { useNavigate, Outlet } from 'react-router-dom'
import { AddCircleOutline, RightOutline,InformationCircleOutline } from 'antd-mobile-icons'
import { ProductCard, Tag, Button,SubmitBar  } from 'react-vant';
import axios from '../../api/axios';
function Index() {
    let navigate = useNavigate()
    let id =34556
    let price=290
    let title='订单支付页面'
    const handelpay=async()=>{
     const res=await axios.get('/api//pay',{params:{id,price,title}})
     const {code,data,message}=res.data
     if(code==200){
        window.location.href=data
        Toast.show(message)
        const result=await axios.get('/api/query',{params:{id}})
        if(result.data.code==200){
            navigate('/sussage')
        }
     }else{
        Toast.show(message)
     }
    }
    return (
        <div>
            <NavBar >确认订单</NavBar>
            <Card
                icon={<AddCircleOutline style={{ color: 'red' }} />}
                title={<div style={{ fontWeight: 'initial' }}>支持选择多个收货地址</div>}
                extra={<RightOutline />}
                style={{ borderRadius: '16px' }}
            ></Card>
            <ProductCard
                num="1"
                price={price}
                desc="云南白药牙膏"
                title="清新口气，云南白药牙膏"
                thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
            />
            <Card
                title={<div>配送服务</div>}
                extra={<div>快递免运费<RightOutline /></div>}
                style={{ borderRadius: '16px' }}
            ></Card>
            <Card
                title={<div>店铺优惠</div>}
                extra={<div>组合优惠<RightOutline /></div>}
                style={{ borderRadius: '16px' }}
            ></Card>
            <Card
                title={<div>开具发票</div>}
                extra={<div>本次不能开发票<RightOutline /></div>}
                style={{ borderRadius: '16px' }}
            ></Card>
            <Card
                title={<div>订单备注</div>}
                extra={<div>无备注<RightOutline /></div>}
                style={{ borderRadius: '16px' }}
            ></Card>
            <Card
                title={<div>顺手买一件</div>}
                extra={<div><InformationCircleOutline /></div>}
                style={{ borderRadius: '16px' }}
            >
                 <ProductCard
                num="1"
                price={price}
                desc="云南白药牙膏"
                title="清新口气，云南白药牙膏"
                thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
            />
            </Card>
            <SubmitBar price={price*100} buttonText="提交订单" onSubmit={()=>handelpay()}/>

        </div>
    )
}

export default Index
